
import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions, TouchableOpacity, BackHandler, Platform, TouchableNativeFeedback, ScrollView } from 'react-native';
import { Button, Flex, InputItem, Toast, List } from 'antd-mobile-rn';
import constants from '../../utils/constants';
import api from '../../utils/api';
import JShareModule from 'jshare-react-native';
import loginService from '../../service/loginService';
import { StackActions } from 'react-navigation';
import Utils from '../../utils';

JShareModule.setDebug({ enable: true });

const window = Dimensions.get("window");

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        height: "100%"
    },
    logo: {
        alignItems: 'center',
        top: 50,
        height: 120

    },
    loginBtnView: {
        padding: 50,
        paddingBottom: 20
    },
    registerText: {
        fontSize: 14,
        color: "#ccc"
    },
    InputItemView: {
        padding: 20,
        paddingRight: 40,
        paddingBottom: 0,
        marginTop: 55,
    },
    loginTitle: {
        fontSize: 18,
        paddingLeft: 15

    }
});


export default class Login extends React.Component {

    static navigationOptions = (e) => {
        return {
            title: "",
            headerBackTitle: null,
            headerStyle: {
                backgroundColor: '#ffffff',
                borderBottomWidth: 0,
                shadowOpacity: 0,
                elevation: 0,
                borderWidth: 0

            },
            header: (e) => {
                return (
                    <View style={{ display: "none" }}></View>
                );
            }
        }
    }


    state = {
        phone: "",
        otherLoginView: "flex",
    }

    timer = null

    constructor(props) {
        super(props);
        this.navigation = this.props.navigation;
    }

    componentDidMount() {

        if (Platform.OS === 'ios') {
            JShareModule.setup();
        }

        //JShareModule.setup();

        //BackHandler.addEventListener("hardwareBackPress",()=>true);
        this.props.navigation.dispatch(StackActions.popToTop());



    }

    componentWillUnmount() {
        // BackHandler.removeEventListener("hardwareBackPress",()=>true);
    }


    /**
     * 第3方登录回调
     */
    _loginResult = (user) => {
        console.log("result:user::", user);
        const { navigation } = this.props;
        if (!user.bind) {
            //Utils.navigation(navigation,"BindPhone",{user:user});
            navigation.navigate("BindPhone", { user: user });
            return;
        }
        Utils.navigation(navigation, "Home", { user: user });
    }


    /**
     * 微信登录
     */
    handleWeixinLogin = () => {

        JShareModule.getSocialUserInfo({ platform: "wechat_session" }, (userInfo) => {
            console.log("weixin userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                //const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }
            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "wechat_session" }, () => {

            })
        }, (e) => {
            console.log("weixin userinfo error ::", e);
        });

    }

    /**
     * QQ登录
     */
    handleQQLogin = () => {
        const { navigate } = this.props.navigation;
        JShareModule.getSocialUserInfo({ platform: "qq" }, (userInfo) => {
            console.log("qq userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    address: `${originData.province},${originData.city}`
                }, this._loginResult);
            }

            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "qq" }, () => { });
        }, () => {
            console.log("qq userinfo error ::");
        })


    }


    handleLogin = () => {
        console.log("click...")
        if (!this.state.phone) {
            Toast.info("手机号码不能为空", 1.2);

            return;
        }
        const { navigate } = this.navigation;
        const phone = this.state.phone.replace(/\s/g, "");
        loginService.sendCode({
            serviceType: "login",
            phone: phone
        }, () => {
            navigate("PhoneLogin", { phone: this.state.phone });
        })








    }

    render() {
        const { navigate } = this.navigation;
        return (
            <View style={styles.container} >
                <ScrollView>
                    <View style={styles.InputItemView}>
                        <Text style={styles.loginTitle}>登录Studin</Text>
                    </View>

                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            type="phone"
                            value={this.state.phone}
                            placeholder={"请输入手机号"}
                            onChange={(value) => {
                                this.setState({
                                    phone: value,
                                });
                            }}
                            onBlur={() => {
                                this.setState({ otherLoginView: "none" })
                            }}

                        ><Text>手机: +86</Text></InputItem>

                    </View>
                    <View style={{ padding: 30, marginTop: 20 }}>
                        <Button
                            onClick={this.handleLogin}
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}>登录</Button>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <Text style={styles.registerText} onPress={this.handleGoRegister}>未注册的手机将为您自动注册账号</Text>
                    </View>
                    <View style={{ padding: 20, width: "100%", marginTop: window.height - 550 }}>
                        <Flex style={{ marginBottom: 25 }}>
                            <Flex.Item style={{ height: 1, backgroundColor: "#cccccc" }}></Flex.Item>
                            <Flex.Item style={{ alignItems: "center" }}>
                                <Text>其他方式登录</Text>
                            </Flex.Item>
                            <Flex.Item style={{ height: 1, backgroundColor: "#cccccc" }}></Flex.Item>
                        </Flex>
                        <Flex style={{ marginBottom: 25 }}>
                            <Flex.Item style={{ alignItems: "center" }}>
                                <TouchableOpacity onPress={this.handleQQLogin.bind(this)}>
                                    <Image source={require("./img/qq.png")} style={{ width: 45, height: 45 }}></Image>
                                </TouchableOpacity>
                            </Flex.Item>
                            <Flex.Item style={{ alignItems: "center" }}>
                                <TouchableOpacity onPress={this.handleWeixinLogin.bind(this)}>
                                    <Image source={require("./img/weixin.png")} style={{ width: 50, height: 50 }}></Image>
                                </TouchableOpacity>
                            </Flex.Item>
                        </Flex>
                    </View>
                </ScrollView>
            </View>
        )
    }
}